import { vars } from '@knno/ui/global.css';
import { style, globalStyle } from '@vanilla-extract/css';
export const editorStyle = style({
	// paddingLeft: '1em',
	lineHeight: '150%',
	// fontFamily: '宋体',
	display: 'block',
	fontSize: '1em',
	selectors: {
		'&': {
			border: 'none',
		},
		'&:focus': {
			outline: '2px solid #f80',
			outlineOffset: '2px',
		},
	},
});

globalStyle(`${editorStyle} p`, {
	margin: 0,
	minHeight: '1em',
	textIndent: '2rem',
	lineHeight: '150%',
});

globalStyle(`${editorStyle} td`, {
	border: `1px solid ${vars.color.regularText}`,
	padding: '0.2em',
	lineHeight: '150%',
});

globalStyle(`${editorStyle} td.selected`, {
	backgroundColor: vars.color.activeFocus,
});

globalStyle(`${editorStyle} table`, {
	borderCollapse: 'collapse',
	width: '100%',
});

globalStyle(`${editorStyle} table.change-column`, {
	cursor: 'col-resize',
});

export const columnResizer = style({
	display: 'block',
	position: 'absolute',
	cursor: 'col-resize',
	backgroundColor: '#5555',
	width: '10px',
	zIndex: '100000',
});
